<template>
	<view style="display: flex;flex-direction: column">
		<title-box  title="分红专区"></title-box>
		<view class="wf-page">
		  <!-- Left column -->
		  <view class="left-column">
		    <view @click="gouser_payment(item)" v-for="(item, index) in leftList" :key="index" class="wf-item">
		      <view class="pictrues relative">
		        <!-- 图片显示 -->
		        <image src="/static/img/fh.png"  style="border-radius: 16rpx 16rpx 16rpx 16rpx;width: 100%;height: 100%;"></image>
		        <!-- <view v-if="item.activityStyle" :style="{ backgroundImage: `url(${item.activityStyle})` }" class="border-picture"></view> -->
		      </view>
		      <view class="texts">
		        <view class="names box-line2">
		          <!-- <text v-if="item.productTags && item.productTags.locationLeftTitle.length" class="font-bg-red mr10 bg-color merType">{{ item.productTags.locationLeftTitle[0].tagName }}</text> -->
		          {{ item.description }}
		        </view>
		        <view class="money">
		         
		          <view class="mt-10">
		            <text class="svip-price">{{ item.level }} 元</text>
		          </view>
		           <view class="sold mt-10 line-heightOne">分红比例{{ (parseFloat(item.profitRatio) * 100).toFixed(2)}}%</view>
		        </view>
		      </view>
		    </view>
		  </view>
		
		  <!-- Right column -->
		  <view class="right-column">
		    <view @click="gouser_payment(item)" v-for="(item, index) in rightList" :key="index" class="wf-item">
		      <view class="pictrues relative">
		  
		        <!-- 图片显示 -->
		        <image src="/static/img/fh.png"  style="border-radius: 16rpx 16rpx 16rpx 16rpx;width: 100%;height: 100%;"></image>
		
		      </view>
		      <view class="texts">
		        <view class="names box-line2">
		          {{ item.description }}
		        </view>
		        <view class="money">
		         
		          <view class="mt-10">
		            <text class="svip-price">{{ item.level }} 元</text>
		          </view>
		         <view class="sold mt-10 line-heightOne">分红比例{{ (parseFloat(item.profitRatio) * 100).toFixed(2)}}%</view>
		        </view>
		        
		      </view>
		    </view>
		  </view>
		</view>
		
		<view class="mores-txt flex" >
			<text>到底了~~</text>
		</view>
	</view>
</template>

<script>
	import TitleBox from '@/components/titleBox/index.vue';
	import{getDividendListApi} from '@/api/api.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
export default {
	computed: mapGetters(['isLogin']),
	components: {
	
		TitleBox
	},
  data() {
    return {
      leftList: [],
      rightList: [],
      allList: [
        {
          id: 1,
          name: "商品名称 1",
          image: "https://via.placeholder.com/500x330",
          stock: 10,
          sales: 100,
          price: 99,
          unitName: "件",
       
          merName: "商家名称",
          merId: 101
        },
        {
          id: 2,
          name: "商品名称 2",
          image: "https://via.placeholder.com/500x330",
          stock: 0,
          sales: 50,
          price: 159,
          unitName: "件",
          activityStyle: "https://via.placeholder.com/150",
      
          merName: "商家名称",
          merId: 102
        },
		{
		  id: 2,
		  name: "商品名称 3",
		  image: "https://via.placeholder.com/500x330",
		  stock: 0,
		  sales: 50,
		  price: 159,
		  unitName: "件",
		  activityStyle: "https://via.placeholder.com/150",
		      
		  merName: "商家名称",
		  merId: 102
		},
		{
		  id: 2,
		  name: "商品名称 4",
		  image: "https://via.placeholder.com/500x330",
		  stock: 0,
		  sales: 50,
		  price: 159,
		  unitName: "件",
		  activityStyle: "https://via.placeholder.com/150",
		      
		  merName: "商家名称",
		  merId: 102
		},
		{
		  id: 7,
		  name: "商品名称 5",
		  image: "https://via.placeholder.com/500x330",
		  stock: 0,
		  sales: 50,
		  price: 159,
		  unitName: "件",
		  activityStyle: "https://via.placeholder.com/150",
		      
		  merName: "商家名称",
		  merId: 102
		},
        // 更多假数据...
      ]
    };
  },
  mounted() {
	  this.getDividendListData()
    // 将商品分配到左右两列
    this.allList.forEach((item, index) => {
      if (index % 2 === 0) {
        this.leftList.push(item);
      } else {
        this.rightList.push(item);
      }
    });
  },
  methods: {
	async getDividendListData() {
	  try {
	    const res = await getDividendListApi()
	    console.log(res, '分红数据')
	      this.allList = res.data || []
	    
	    
	        this.splitWaterfall()
	  } catch (e) {
	    console.error('请求失败', e)
	  }
	},
	 splitWaterfall() {
	    this.leftList = []
	    this.rightList = []
	    this.allList.forEach((item, index) => {
	      if (index % 2 === 0) {
	        this.leftList.push(item)
	      } else {
	        this.rightList.push(item)
	      }
	    })
	  },

	  gouser_payment(item){
		  
		  if(this.isLogin){
			  const index = this.allList.findIndex(items => items.id === item.id)
			  		
			  		 
			  uni.navigateTo({
			  	url:`/pages/users/user_payment/index?id=${item.id}&index=${index}`
			  })
		  }else{
			  toLogin();
		  }
		
		  
		
		  
	  },
   
  }
};
</script>

<style scoped  lang="scss">
	.mores-txt {
		width: 100%;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		color: #999;
		font-size: 24rpx;
	
		.iconfont {
			margin-top: 2rpx;
			font-size: 20rpx;
		}
	}
.wf-page {
  display: flex;
  justify-content: space-evenly
}

.left-column,
.right-column {
  width: 48%;
}

.wf-item {
  margin-bottom: 16rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 10rpx;
}

.pictrues {
  position: relative;
  background-color: #f5f5f5;
  border-radius: 16rpx 16rpx 0 0;
  width: 339rpx;
  height:330rpx;;
}

.sellOut {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 4rpx 8rpx;
  border-radius: 10rpx;
  font-size: 14rpx;
}

.texts {
  padding: 16rpx;
  font-size: 30rpx;
  color: #222;
  background-color: #fff;
  border-radius: 0 0 16rpx 16rpx;
}

.names {
  font-size: 28rpx;
  font-weight: 400;
  color: #333;
}

.money {
  font-size: 26rpx;
  color: #888;
}

.svip-price {
  font-size: 38rpx;
  color: #E93323;
}

.sold {
  font-size: 22rpx;
  color: #666;
}

.company {
  display: flex;
  align-items: center;

  .name {
    max-width: 210rpx;
    color: #666;
    margin-right: 10rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .flex {
    display: flex;
    align-items: center;
    color: #282828;
  }

  .iconfont {
    font-size: 20rpx;
    margin-top: 4rpx;
  }
}
</style>
